<template>
  <div>
    <el-form ref="pram" :model="pram" :rules="rules" label-width="135px" @submit.native.prevent>
      <el-form-item v-if="operateType!=0" label="人员基本信息" prop="titles1">
        <div style="display: flex;flex-wrap: wrap">
          <div class="block-item" @click="changeSelect(item)" v-for="item in optionList.personTitleList" :class="getSelectIndex(item)!=-1?'select':''" :key="item.key">
            <div class="name">{{item.title}}</div>
            <div class="number" v-if="getSelectIndex(item)!=-1">{{getSelectIndex(item)+1}}</div>
          </div>
        </div>

<!--        <el-select v-model="pram.titles1" placeholder="人员基本信息" clearable multiple style="width: 100%">-->
<!--          <el-option-->
<!--            v-for="(item,index) in optionList.personTitleList"-->
<!--            :key="index"-->
<!--            :label="item.title"-->
<!--            :value="item.key"-->
<!--          />-->
<!--        </el-select>-->
      </el-form-item>
      <el-form-item label="个人电子设备信息" prop="titles2" v-if="this.operateType === 0">
        <el-select v-model="pram.titles2" placeholder="个人电子设备信息" clearable multiple style="width: 100%" disabled>
          <el-option
            v-for="(item,index) in optionList.electronicTitleList"
            :key="index"
            :label="item.title"
            :value="item.key"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handlerSubmit('pram')" v-hasPermi="['admin:person:export']">直接导出 / 选定字段导出</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {Debounce} from '@/utils/validate'
import * as personApi from "@/api/person";
import {createFile} from "@/utils/utils";
export default {
  // name: "edit"
  components: { },
  props: {
    operateType: {
      type: Number,
      required: true
    },
    editData: {
      type: Object,
      default: () => {
        return { rules: [] }
      }
    },
    allOptionList:{
      type:Object
    },
    allMultipleSelection:{
      type:Array
    }
  },
  data() {
    return {
      constants:this.$constants,
      pram: {
        titles1:[],
        titles2:[],
        personId:''
      },
      titles1Select:[],
      rules: {
        // titles1: [{ required: true, message: '请至少选择一项', trigger: ['blur', 'change'] }],
        // titles2: [{ required: true, message: '请至少选择一项', trigger: ['blur', 'change'] }],
      },
      personName:'',
      optionList: {
        electronicTitleList: [],
        personTitleList: [],
      },
      multipleSelection:[],//列表页中选择的人员id数组
    }
  },
  mounted() {
    this.initEditData()
  },
  methods: {
    close() {
      this.$emit('hideExportDialog')
    },
    getSelectIndex(row){
      return this.titles1Select.findIndex(item=>item.key==row.key);
    },
    changeSelect(row){
      const index=this.titles1Select.findIndex(item=>item.key==row.key);
      if(index!==-1){
        this.titles1Select.splice(index,1)
      }else{
        this.titles1Select.push(row)
      }
      this.pram.titles1=JSON.parse(JSON.stringify(this.titles1Select.map(item=>item.key)))
    },
    initEditData() {
      this.optionList = this.allOptionList
      this.multipleSelection = this.allMultipleSelection

      // const electronicTitleList =  this.optionList.electronicTitleList
      // electronicTitleList.forEach((p)=>{
      //   this.pram.titles2.push(p.key)
      // })

      const { id, name } = this.editData //通过list中slot-scope=“scope“，scope.$index就是该行的下标，scope.row就是该行的数据所有消息对象，有了这两个参数就可以实现编辑、删除功能（this.editData就是scope.row传入的对象参数）
      if(this.operateType === 0){
        this.pram.personId = id
        this.personName = name
      }else if(this.operateType === 1){
        this.pram.personId = this.multipleSelection.join(',')
      }

    },
    handlerSubmit:Debounce(function(form) {
      this.$refs[form].validate(valid => {
        if (!valid) return
        if (this.operateType === 0) {
          this.handlerExport()
        } else if(this.operateType === 1){
          this.handlerExportRoster()
        }
      })
    }),
    handlerExport() {
      let loading = this.$loading({
        lock: true,
        text: "导出中，请稍候...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      let titles1 = JSON.parse(JSON.stringify(this.pram.titles1))
      let titles2 = JSON.parse(JSON.stringify(this.pram.titles2))
      let titles = titles1.concat(titles2).join(',')
      const _pram = {
        personId:this.pram.personId,
        titles,
        titles1:titles1.join(','),
        titles2:titles2.join(',')
      }
      personApi.personExportExcel(_pram)
        .then((res) => {
          if(!createFile(res,this.personName)){
            this.$message.success("未知的文件格式");
          }

          loading.close();
        })
        .catch((res) => {
          loading.close();
        });
    },
    handlerExportRoster() {
      if(this.multipleSelection.length === 0){
        this.$message.error("请在人员列表中勾选导出人员")
        return
      }
      let loading = this.$loading({
        lock: true,
        text: "导出中，请稍候...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });

      let titles1 = JSON.parse(JSON.stringify(this.pram.titles1))
      const _pram = {
        personId:this.pram.personId,
        titles:titles1.join(','),
      }
      personApi.personExportRoster(_pram)
        .then((res) => {
          if(!createFile(res,'人员花名册')){
            this.$message.success("未知的文件格式");
          }

          loading.close();
        })
        .catch((res) => {
          loading.close();
        });
    },
  }
}
</script>

<style scoped lang="scss">
  .biglabel{
    width:100%;
    font-weight:bold;
    font-size:16px;
    margin-bottom:10px;
  }
  .dislabel{
    ::v-deep.el-input--small .el-input__inner,
    ::v-deep.el-input--medium .el-input__inner{
      height:36px;
      line-height:36px;
      font-size:12px;
    }
    ::v-deep.el-textarea__inner{
      font-size:12px;
    }

  }
  .block-item{
    padding: 0 10px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #efefef;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-right: 10px;
    margin-bottom: 10px;
    .number{
      position: absolute;
      right: -9px;
      top: -9px;
      width: 18px;
      height: 18px;
      color: #fff;
      background: red;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }
  }
  .block-item.select{
    background: #1890FF;
    color: #fff;
    border: none;
  }
</style>
